<template>
  <div class="VeRing">
    <div
      :id="id"
      :style="{ height: height, width: width }"
    />
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../../../components/Charts/mixins/resize'
export default {
  name: 'VeRing',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '400%'
    },
    chartData: {
      type: Array,
      required: true
    },
    height: {
      type: String,
      default: '400%'
    },
    colors: {
      type: Array,
      default: function() {
        return [
          '#c23531',
          '#2f4554',
          '#61a0a8',
          '#d48265',
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ]
      }
    },
    textinfo: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      chart: null,
      showTag: [],
      showData: []
    }
  },
  watch: {
    chartData(newV, oldV) {
      this.showTag = []
      this.showData = []
      const _self = this
      if (this.chartData.length !== 0) {
        this.chartData[1].forEach(function(newV) {
          _self.showTag.push(newV.name)
          _self.showData.push(newV)
        })
      }
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  created() {
    this.showTag = []
    this.showData = []
    const _self = this
    if (this.chartData.length !== 0) {
      this.chartData[1].forEach(function(item) {
        _self.showTag.push(item.name)
        _self.showData.push(item)
      })
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = []
  },
  methods: {
    initChart() {
      const _self = this
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(
        {
          title: {
            text: this.chartData[0],
            x: 'center',
            y: 'top',
            top: 1
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '55%',
              center: ['50%', '45%'],
              data: _self.showData,
              // [
              //     {value: 335, name: '直接访问'},
              //     {value: 310, name: '邮件营销'},
              //     {value: 234, name: '联盟广告'},
              //     {value: 135, name: '视频广告'},
              //     {value: 1548, name: '搜索引擎'}

              // ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        true
      )
    }
  }
}
</script>
